<template>
<div class="login-container">
    <div class="header wid">
        <img class="logo" src="@/assets/images/logo.png" alt="">
        <div class="header-title">
            新生儿代谢病早筛系统
        </div>
    </div>
    <img src="@/assets/images/login-cover-left.png" class="context-img-cover-left1">
    <img src="@/assets/images/login-cover-left.png" class="context-img-cover-left2">

    <img src="@/assets/images/login-right.png" class="context-img-cover-right1">
    <img src="@/assets/images/login-right.png" class="context-img-cover-right2">
    <div class="context wid">
        <div class="context-img">
        </div>
        <!-- 左边圆弧 -->
        <div class="context-form">

        </div>
    </div>
    <div class="context-form-login">
        <p>欢迎登录</p>
        <!-- 用户名 -->
        <div class="form-item">
            <img class="img-size" src="@/assets/images/user-icon.png" alt="">
            <input v-model="userInfo.username" class="input-bg" type="text">
        </div>
        <!-- 密码 -->
        <div class="form-item">
            <img class="img-size" src="@/assets/images/lock-icon.png" alt="">
            <input v-model="userInfo.password" class="input-bg" :type="passwordType">
            <img class="img-size" src="@/assets/images/eyes-close.png" @click="changeEyeStatus($event)">
        </div>
        <!-- 验证码 -->
        <div class="form-yzm flx">
            <div class="form-yzm-ipt flx">
                <img class="img-size" src="@/assets/images/user-icon.png" alt="">
                <input v-model.trim="userInfo.code" class="input-bg" type="text" @keyup.enter="login">
            </div>
            <img class="form-yzm-img" :src="yzmSrc" @click="captchaImage">
        </div>
        <div class="login-btn" @click="login">
            登录
        </div>
        <!-- <div class="form-img-cover">
                    <img src="@/assets/images/login-right.png" alt="">
                </div> -->
    </div>

    <div class="footer">
        数愈医疗新生儿代谢病筛查中心 版权所有
    </div>
</div>
</template>

<script>
import {
    captchaImage,
    login
} from '@/api/user'
export default {
    name: "Login",
    data() {
        return {
            eyeStatus: false, //密码是否能看见
            passwordType: 'password', //密码框类型
            eyeColse: require('@/assets/images/eyes-close.png'), //关闭密码
            eyeOpen: require('@/assets/images/eyes-open.png'), //看见密码
            yzmSrc: require('@/assets/images/yzm.png'),
            userInfo: {
                username: 'admin',
                password: 'admin123',
                code: '',
                uuid: ''
            }
        }
    },
    created() {
        // 获取验证码
        this.captchaImage();
    },
    methods: {
        /**
         * 切换密码是否能看见
         */
        changeEyeStatus(e) {
            this.eyeStatus = !this.eyeStatus;
            if (this.eyeStatus) {
                e.target.src = this.eyeOpen;
                this.passwordType = 'text';
            } else {
                e.target.src = this.eyeColse;
                this.passwordType = 'password'
            }
        },

        /**
         * 登录
         */
        async login() {
            const res = await login(this.userInfo);
            console.log('登录结果', res);

            if (res.msg === '验证码已失效' || res.msg === '验证码错误') this.captchaImage()
            if (res.code != 200) return

            sessionStorage.setItem("token", res.token);
            sessionStorage.setItem('fileDataList', JSON.stringify([]))
            sessionStorage.setItem('fileData', JSON.stringify([]))
            this.$router.replace({
                name: "DASHBOARD",
            });
        },

        /**
         * 切换验证码
         */
        async captchaImage() {
            const res = await captchaImage();
            if (res.code != 200) return
            // console.log('验证码', res);

            this.yzmSrc = `data:image/png;base64,${res.img}`;
            this.userInfo.uuid = res.uuid;
        }

    },

}
</script>

<style lang="scss" scoped>
#app {
    overflow: scroll !important;
}

.wid {
    width: 90%;
    margin: 0 auto;
}

.flx {
    display: flex;
    align-items: center;
}

.img-size {
    width: 20px;
    height: 20px;
}

.input-bg {
    border: none;
    outline: none;
    background: #f5f5f5;
    margin-left: 10px;
    flex-grow: 1;
}

.login-container {
    min-height: 100%;
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    position: relative;

    .header {
        display: flex;
        align-items: center;
        padding: 1.5vw 0 1.5vw 10px;

        .logo {
            width: 32px;
        }

        .header-title {
            font-size: 26px;
            color: #4c4980;
            font-weight: bold;
            margin-left: 10px;
        }
    }

    .context-img-cover-left1,
    .context-img-cover-left2 {
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;

    }

    .context-img-cover-right1,
    .context-img-cover-right2 {
        position: absolute;
        z-index: 0;
        top: 0;
        right: 0;

    }

    .context-img-cover-right2,
    .context-img-cover-left2 {
        opacity: .28;
        z-index: 3;
    }

    // .context-img-cover-right2 {
    //     opacity: .28;
    //     z-index: 6;
    // }

    .context {
        height: 39.5vw;
        // min-height: 600px;
        display: flex;
        justify-content: space-between;
        box-shadow: 0px 3px 30px 0px rgba(165, 160, 200, 0.4);
        border-radius: 20px;
        position: relative;
        z-index: 2;
        overflow: hidden;

        .context-img {
            width: 65%;
            background: url('../../assets/images/login-born.png') no-repeat center;
            background-size: cover;

            .context-img-cover {
                max-width: 100%;
                height: 100%;
                border-radius: 12px 0 0 12px;
            }
        }

        .context-form {
            width: 35%;
            display: flex;
            align-items: center;
            background: #fff;
            justify-content: center;
            // position: relative;

        }
    }

    .context-form-login {
        min-width: 300px;
        margin-bottom: 5%;
        position: absolute;
        z-index: 5;
        top: 15vw;
        right: 12vw;

        @media only screen and (max-width: 1281px) {
            // background-color: green;
            top: 13vw;
            right: 7vw;
        }

        p {
            text-align: center;
            font-size: 30px;
            color: #3c3978;
            font-weight: bold;
        }

        .form-item {
            display: flex;
            margin: 20px 0;
            background-color: #f5f5f5;
            border-radius: 4px;
            align-items: center;
            padding: 10px;
            width: 350px;
            justify-content: space-between;
        }

        .form-yzm {
            margin: 20px 0;

            .form-yzm-ipt {
                background-color: #f5f5f5;
                border-radius: 4px;
                padding: 10px;
                width: 260px;
                margin-right: 10px;

                input {
                    width: 130px;
                }
            }

            .form-yzm-img {
                height: 40px;
                width: 75px;
            }
        }

        .login-btn {
            margin-top: 10px;
            text-align: center;
            font-size: 16px;
            color: #ffffff;
            line-height: 2.8;
            background-color: #8775ff;
            border-radius: 4px;
        }

        .form-img-cover {
            position: absolute;
            top: -105px;
            right: -103px;
            transform: rotate(-2deg);
        }
    }

    .footer {
        text-align: center;
        color: #a5a5a5;
        font-size: 16px;
        padding: 30px 0 0;
    }
}
</style>>
